<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加页demo</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="lib/element-ui.css">
    <!-- 引入组件库 -->
    <script src="lib/vue.min.js"></script>
    <script src="lib/element-ui.js"></script>
</head>
<body>

<div id="add_template">
    <div class="add_template">

        <!--面包屑导航模板-->
        <el-breadcrumb class="topNav" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>

        <!--标题模板-->
        <el-row>
            <el-col :span="24"><div class="title-template">增加角色</div></el-col>
        </el-row>

        <!--form表单模板（带验证）-->
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px"
                :label-position="labelPosition">

            <!--文本框模板-->
            <el-form-item label="项目名称：" prop="name">
                <el-input v-model="form.name" style="width: 30%;"></el-input>
            </el-form-item>

            <!--下拉框模板-->
            <el-form-item label="请选择项目类型：" prop="region">
                <el-select v-model="form.region" placeholder="请选择项目类型" style="width: 30%;">
                    <el-option label="请选择项目类型" value=""></el-option>
                    <el-option label="项目类型1" value="shanghai"></el-option>
                    <el-option label="项目类型2" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <!--日期模板-->
            <el-form-item label="项目起始时间：" prop="beginDate">
                <el-date-picker type="date" placeholder="请选择开始日期" v-model="form.beginDate" style="width: 30%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="项目结束时间：" prop="endDate">
                <el-date-picker type="date" placeholder="请选择结束日期" v-model="form.endDate" style="width: 30%;"></el-date-picker>
            </el-form-item>

            <!--多行文本框模板-->
            <el-form-item label="项目描述：" prop="desc">
                <el-input type="textarea" v-model="form.desc" style="width: 30%;"></el-input>
            </el-form-item>

            <!--多选框模板-->
            <el-form-item label="设置角色权限">
                <el-checkbox
                        label="全部权限"
                        :indeterminate="form.isIndeterminate"
                        v-model="form.checkAll"></el-checkbox>

                <el-checkbox-group v-model="form.checkList">
                    <el-checkbox label="系统管理"
                                 :indeterminate="form.isIndeterminate"
                                 v-model="form.checkAll"></el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group class="checkbox-child" v-model="form.checkList">
                    <el-checkbox label="机构管理"></el-checkbox>
                    <el-checkbox label="角色管理"></el-checkbox>
                    <el-checkbox label="用户管理"></el-checkbox>
                </el-checkbox-group>

                <el-checkbox label="缴费信息维护"
                             :indeterminate="form.isIndeterminate"
                             v-model="form.checkAll"></el-checkbox>
                <el-checkbox-group class="checkbox-child" v-model="form.checkList">
                    <el-checkbox label="缴费人员管理"></el-checkbox>
                </el-checkbox-group>

                <el-checkbox label="收费管理"
                             :indeterminate="form.isIndeterminate"
                             v-model="form.checkAll"></el-checkbox>
                <el-checkbox-group class="checkbox-child" v-model="form.checkList">
                    <el-checkbox label="项目类型设置"></el-checkbox>
                    <el-checkbox label="收费项目设置"></el-checkbox>
                    <el-checkbox label="手动生成费用"></el-checkbox>
                    <el-checkbox label="批量生成费用"></el-checkbox>
                    <el-checkbox label="收费查询"></el-checkbox>
                </el-checkbox-group>

                <el-checkbox-group v-model="form.checkList">
                    <el-checkbox label="线下收费"
                                 :indeterminate="form.isIndeterminate"
                                 v-model="form.checkAll"></el-checkbox>
                </el-checkbox-group>

                <el-checkbox label="通知"
                             :indeterminate="form.isIndeterminate"
                             v-model="form.checkAll"></el-checkbox>
                <el-checkbox-group class="checkbox-child" v-model="form.checkList">
                    <el-checkbox label="通知管理"></el-checkbox>
                    <el-checkbox label="银行公告"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <!--按钮模板-->
            <el-form-item>
                <el-button type="primary"  @click="submitForm('form')">保存</el-button>
                <el-button class="btn-item-cancel"  @click="resetForm('form')">重置</el-button>
            </el-form-item>
        </el-form>

    </div>
</div>

<script>

    var add_template = new Vue({
        el: '#add_template',
        data: {
            labelPosition:'left',
            form: {
                name: '',
                region: '',
                beginDate: '',
                endDate: '',
                desc: '',
                checkList:[],
                checkAll:false,
                isIndeterminate: true
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择项目类型', trigger: 'change' }
                ],
                beginDate: [
                    { type: 'date', required: true, message: '请选择开始日期', trigger: 'change' }
                ],
                endDate: [
                    { type: 'date', required: true, message: '请选择结束日期', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写项目描述', trigger: 'blur' }
                ]
            },
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate(
                    function (valid) {
                        if (valid) {
                            alert('submit!');
                        } else {
//            console.log('error submit!!');
                            return false;
                        }
                    });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }
    });
</script>

<style scoped>
    .add_template .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .add_template .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;

    }

    .add_template .add-template-form{
        background: #ffffff;
        padding: 50px 30px;
    }
    .add_template .add-template-form label.el-form-item__label{
        font-size: 16px;
        color: #666666;
    }
    .add_template .add-template-form .el-form-item{
        margin-bottom: 50px;
    }
    .add_template .add-template-form .btn-item-cancel{
        margin-left: 100px;
    }
    .add_template .checkbox-child{
        margin-left: 50px;
    }
</style>

</body>
</html>